/* eslint-disable react-refresh/only-export-components */
import React from "react";
import styles from "./css/ticket.module.css";
import { NavBar, Button, SearchBar, Swiper, Tabs, Card } from "antd-mobile";
import { useLoaderData, useNavigate } from "react-router-dom";
import { LocationFill } from "antd-mobile-icons";
import { getLocation, getSwiper } from "../../api/info";
import one from "../../assets/image/one.png";
import two from "../../assets/image/two.png";
import thr from "../../assets/image/thr.png";
import gg from "../../assets/image/gg.png";
import cc from "../../assets/image/cc.png";
import tam from "../../assets/image/tam.png";
function Index() {
  let nav = useNavigate();
  let { swiper, location } = useLoaderData();
  const items = swiper.map((item, index) => (
    <Swiper.Item key={index}>
      <img src={item.image} style={{ width: "100%", height: "150px" }} />
    </Swiper.Item>
  ));
  const goList = () => {
    nav("/list");
  };
  return (
    <div className={styles.homebox}>
      <NavBar onBack={() => nav(-1)} style={{ background: "#f8f8f8" }}>
        景区门票
      </NavBar>
      <div className={styles.topbox}>
        <span style={{ color: "#7c26ca", position: "fixed", top: "60px" }}>
          <LocationFill fontSize={22} /> {location}
        </span>
        <SearchBar
          placeholder="搜索景区"
          style={{ "--padding-left": "100px" }}
        />
        <span style={{ position: "fixed", top: "60px", right: "12px" }}>
          <Button color="primary" size="mini">
            搜索
          </Button>
        </span>
      </div>
      <div style={{ margin: "60px 10px 10px" }}>
        <Swiper loop autoplay>
          {items}
        </Swiper>
      </div>
      <div>
        <h2 style={{ textAlign: "center", margin: "20px" }}>
          - 当季热门景区 -
        </h2>
        <div className={styles.hotbox}>
          <div>
            <h3>水立方</h3>
            <p>夏季游泳圣殿</p>
            <img src={one} />
          </div>
          <div>
            <h3>什刹海</h3>
            <p>感受北京古韵</p>
            <img src={two} />
          </div>
          <div>
            <h3>颐和园</h3>
            <p>娘娘们的后花园</p>
            <img src={thr} />
          </div>
        </div>
      </div>
      <div style={{ position: "relative" }}>
        <Button
          onClick={goList}
          style={{ position: "absolute", right: 0, zIndex: "9999" }}
        >
          更多
        </Button>
        <Tabs>
          <Tabs.Tab title="推荐景区" key="1"></Tabs.Tab>
          <Tabs.Tab title="附近景区" key="2"></Tabs.Tab>
          <Tabs.Tab title=" " key="3"></Tabs.Tab>
        </Tabs>
        <Card>
          <div className={styles.jq}>
            <div>
              <img src={gg} />
            </div>
            <div>
              <h5>故宫博物馆</h5>
              <p>北京 | 距您12.6km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥60<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq}>
            <div>
              <img src={cc} />
            </div>
            <div>
              <h5>八达岭长城</h5>
              <p>北京 | 距您69.5km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥50<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq}>
            <div>
              <img src={tam} />
            </div>
            <div>
              <h5>天安门城楼</h5>
              <p>北京 | 距您13.8km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥20<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

export default Index;
export const loader = async () => {
  let { data: res } = await getSwiper();
  let { data: ree } = await getLocation();
  return { swiper: res, location: ree.city };
};
